<template>
	<view id="moreShop">
		<view class="search">
			<!-- <view class="fly" @click="C_choosefly">类别1</view> -->
			<u-search 
				class="u-search"
				bgColor="#ffffff"
				shape='square'
				@custom='searchClick' @search='searchClick'
				placeholder="搜索" v-model="keyword" :action-style='search.btnStyle'></u-search>
		</view>
		<h-shop-filter @C_navItem='C_navItem' />
		<view :class=" togglelist?'list':'list1'">
			<view v-for="(item,index) in list" :key='index' @click="C_listItem(item)">
				<image :src="item.image" mode="aspectFill"></image>
				<view>
					<view class="name">{{item.name}}</view>
					<view class="price">￥{{item.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search:{
					btnStyle:{
						background:'linear-gradient(#2890E7,#2261E2)',
						color:'#ffffff',
						padding:'13rpx 30rpx',
						borderRadius:'10rpx',
						width:'auto'
					}
				},
				list:[],
				togglelist:1,
				keyword:'',
				
				fileter:{
					active:false,
					name:'综合'
				}
			};
		},
		onShow(){
			let params = {
					orderBy	:"",		//否	string	销量=sales,价格=price,综合=''
					orderor	:"desc",		//否	string	从高到低=desc,从低到高=asc
					page	:"1",		//否	int	无
					keyword	:"",		//否	int	搜索内容
					limit:10
				}
			this.def_database(params)
		},
		methods:{
			searchClick(){
				console.log('casc');
				let canshu = {
					orderBy	:this.fileter.name == '价格'?'price':this.fileter.name == '销量'?'sales':'',
					// orderBy	:"",				//否	string	销量=sales,价格=price,综合=''
					orderor	:this.fileter.active?'desc':'asc',		
					// orderor	:"desc",			//否	string	从高到低=desc,从低到高=asc
					page	:"1",					//否	int	无
					keyword	:this.keyword,			//否	int	搜索内容
					limit:10
				}
				this.def_database(canshu)
			},
			def_database(params){
				this.$u.post('/index/goods',params).then(res=>{
					console.log(res,'211');
					let {count,list} = res.data;
					
					this.list = list
				})
			},
			C_navItem(params){
				let {active,name} = params.obj[params.index];
				console.log({active,name});
				this.fileter = {active,name}
				let canshu = {
					orderBy	:name == '价格'?'price':name == '销量'?'sales':'',
					// orderBy	:"",		//否	string	销量=sales,价格=price,综合=''
					orderor	:active?'desc':'asc',		
					// orderor	:"desc",		//否	string	从高到低=desc,从低到高=asc
					page	:"1",		//否	int	无
					keyword	:"",		//否	int	搜索内容
					limit:10
				}
				this.def_database(canshu)
			},
			C_choosefly(){
				console.log(123);
				uni.showActionSheet({
					itemList:['分类2','分类1','分类2',],
					success:res=>{
						console.log(res);
					},
				})
			},
			C_listItem(item){
				uni.navigateTo({
					url:'./detail/detail?id='+item.id
				})
				// console.log(item);
				// uni.navigateTo({
				// 	url:'./detail/detail?db='+encodeURIComponent(JSON.stringify(item))
				// })
			}
			
			
		}
	}
</script>

<style lang="scss">
	.search{
		display: flex;
		align-items: center;
		padding: 20rpx;
		position: sticky;
		background-color: #F5F5F5;
		top: 0;
		.u-search{
			flex: 1;
		}
		.fly{
			background-color: #FFFFFF;
			padding: 15rpx 20rpx;
			border-top-left-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			position: relative;
			&::after{
				content: '';
				display: block;
				position: absolute;
				right: 0;
				height: 60%;
				top: 20%;
				border-right: 1px solid #e0e0e0;
			}
		}
	}
	.list1{
		width: 95%;
		margin: 20rpx auto;
		>view{
			display: flex;
			padding: 20rpx;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			font-weight: bold;
			font-size: 35rpx;
			image{
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}
			>view{
				.price{
					color: $h-price;
					margin-top: 20rpx;
				}
			}
		}
	}
	.list{
		display: grid;
		grid-template-columns:repeat(2,1fr);
		grid-gap:20rpx;
		overflow: hidden;
		width: 95%;
		margin: 20rpx auto;
		>view{
			background-color: #FFFFFF;
			border-radius: 10rpx;
			overflow: scroll;
			font-weight: bold;
			font-size: 35rpx;
			image{
				max-width: 100%;
				border-radius: 20rpx;
			}
			>view{
				padding: 15rpx 20rpx;
				.name{
					color: #333333;
				}
				.price{
					color: $h-price;
					margin-top: 15rpx;
				}
			}
		}
	}
</style>
